<template>



  <!-- 实时访问数据-->
  <!--  访问人数   观看视频数  -->

  <div>
    <el-row>

      <el-card>
        <el-button class="btn btnStyle1" @click="button1">观看视频数</el-button>
        <el-button class="btn btnStyle1" @click="button2"  type="primary" plain>访问人数</el-button>
<!--        <el-button class="btn btnStyle1" @click="button3">访问次数</el-button>-->

        <div id="person" style="width: 100%; height: 450px"></div>
      </el-card>
    </el-row>

  </div>

</template>

<script>
import * as echarts from "echarts";

export default {
  name: "RealTime2",
  data() {
    return{
      showNum: 1,
      sureDelBox : ' '
    }
  },
  methods: {
    button1(){
      // console.log("观看视频数据")
      this.showNum = 1
      this.$router.push('/realTime');
    },
    button2(){
      // console.log("访问人数")
      this.showNum = 2
      this.$router.push('/realTime2');
    },
    button3(){
      this.showNum = 3

    }
  },
  mounted(item) {

    //实时访问网站人数
    var optionPerson = {
      title: {
        text: '今日实时数据 ',
        subtext: '热度',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['今天', '一天前', '七天前']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '1%',
        right: '1%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: []
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '一天前',
          type: 'line',
          // stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [],
          itemStyle: {
            normal: {
              //这里是重点
              color: "rgb(145,204,117)"
            }
          }
          // data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '七天前',
          type: 'line',
          // stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [],
          itemStyle: {
            normal: {
              //这里是重点
              color: "rgb(204,131,63)"
            }
          }
          // data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '今天',
          type: 'line',
          // stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [],
          itemStyle: {
            normal: {
              //这里是重点
              color: "rgb(63,143,204)"
            }
          }
          // data: [150, 232, 201, 154, 190, 330, 410]
        }
      ]
    };
    var chartDomPerson = document.getElementById('person');
    var myChartPerson = echarts.init(chartDomPerson);

    this.request.get( "/echarts/numberPersons").then(res => {
      if(res.state == 200){
        // console.log(res.data.today)
        // console.log(res.data.dayBefore/)
        // console.log(res.data.sevenDaysAgo)
        // console.log(res.data.XTitle)
        //将后端得到的数据放入数组中
        optionPerson.series[0].data = res.data.today;
        // optionPerson.series[2].data = res.data.sevenDaysAgo;
        optionPerson.series[2].data = res.data.dayBefore;
        optionPerson.series[1].data = res.data.sevenDaysAgo;
        // option.xAxis.data =  res.data.XTitle;
        optionPerson.xAxis[0].data =   [
          '00:00',
          '01:00',
          '02:00',
          "03:00",
          '04:00',
          '05:00',
          '06:00',
          '07:00',
          '08:00',
          '09:00',
          '10:00',
          '11:00',
          '12:00',
          '13:00',
          '14:00',
          '15:00',
          '16:00',
          '17:00',
          '18:00',
          '19:00',
          '20:00',
          '21:00',
          '22:00',
          '23:00'
        ];
        optionPerson.title.subtext = res.data.nowTime;
        myChartPerson.setOption(optionPerson);
      }

    })



  }

}
</script>

<style>
.btnStyle1{
  width: 120px;
  height: 50px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;

}
</style>

